//Vars
@imagePath: '../static/img/';
@contextWidth: 960;

//Fonts




/**
 * borderImage
 * @img {string}
 * @number {number}
 * @repeat {string}
 * http://www.w3.org/TR/css3-background/#border-images
 */
.borderImage(@img, @number, @repeat: stretch) {
    @val: @img @number @repeat;
    border-image: @val;
}

/**
 * Pixel width in percentage width
 * @widthInPixel {number}
 * need the @gridWidth value
 */
.pixelWidthInPercentage(@widthInPixel,@contextWidth){
	width: (@widthInPixel / @contextWidth) * 100%;
}

/**
 * Background image mixin
 * @image {string}
 * @repeat {string}
 * @position {string}
 * @color {string}
 */
.bg(@image,@repeat:no-repeat,@position:top left,@color:transparent){
	background:url('@{imagePath}@{image}') @repeat @position @color;
}

/**
 * Sprite mixin
 * @width {string}
 * @height {string}
 * @positionX {string}
 * @positionY {string}
 */
.sprite(@width,@height,@positionX:0px,@positionY:0px){
	.bg('sprite.png');
	display:block;
	zoom:1;
	background-position: -@positionX -@positionY;
	width:@width;
	height:@height;
}

/**
 * letter spacing value from photoshop to css
 * warning ! in progress...
 */
.letterSpacing(@photoshopValue;@fontSize;){
	@letterSpacing: @photoshopValue * (@fontSize / 1000);	
	letter-spacing: unit(@letterSpacing, px);
}

/**
 * Debug mixin
 * @size {string}
 * @color {string}
 */
.debug(@size:1px,@color:red){
	outline: @size solid  @color;
}